<template>
  <div>
    <h3>门店列表</h3>
    <div>
      门店名称:<input type="text" v-model.trim="info.shopName" />
      开业时间:<input type="date" v-model="info.openTime1" />-<input
        type="date"
        v-model="info.openTime2"
      />
      <input type="button" value="查询" class="btn btn-primary" @click="show" />
      <input
        type="button"
        value="批量删除"
        class="btn btn-danger"
        @click="delAll"
      />
      <input
        type="button"
        value="批量启用"
        class="btn btn-info"
        @click="updatStateAll(true)"
      />
      <input
        type="button"
        value="批量禁用"
        class="btn btn-warning"
        @click="updatStateAll(false)"
      />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <input type="checkbox" v-model="checked" @change="checkAll" />
          </td>
          <td>序号</td>
          <td>门店名称</td>
          <td>分店名称</td>
          <td>门店图片</td>
          <td>门店状态</td>
          <td>开业时间</td>
          <td>门店地址</td>
          <td>门店类型</td>
          <td>特色</td>
          <td>电话</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list" :key="item.id">
          <td>
            <input
              type="checkbox"
              v-model="ids"
              :value="item.id"
              @change="checkOne"
            />
          </td>
          <td>{{ item.id }}</td>
          <td>{{ item.shopName }}</td>
          <td>{{ item.branchName }}</td>
          <td>
            <img :src="item.photo" width="50" height="50" />
          </td>
          <td>{{ item.state == true ? '开启' : '禁用' }}</td>
          <td>{{ moment(item.openTime).format('YYYY-MM-DD') }}</td>
          <td>{{ item.addressName }}</td>
          <td>{{ item.shopType }}</td>
          <td>{{ item.teSe }}</td>
          <td>{{ item.tel }}</td>
          <!-- <td>{{ item.state ? '开启' : '禁用' }}</td> -->
          <td>
            <span v-if="item.state == 1" style="color: chartreuse">开启</span>
            <span v-if="item.state == 0" style="color: coral">禁用</span>
          </td>
          <!-- <td>{{ item.state ? '解冻' : '冻结' }}</td> -->
          <!-- <td>{{ item.state ? '启用' : '注销' }}</td> -->
          <!-- <td>{{ item.state ? '上架' : '下架' }}</td> -->
          <!-- <td>{{ item.state ? '开店' : '闭店' }}</td> -->
          <!-- 以上修改状态状态会来回的切换 -->
          <!-- <td>{{ '发布' }}</td> -->
          <!-- <td>{{ '审核'  }}</td> -->
          <!-- 只能修改成一种状态相当于逻辑删除 -->
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="update(item.id)"
            />
            <input
              type="button"
              value="删除"
              class="btn btn-danger"
              @click="del(item.id)"
            />
            <input
              type="button"
              value="开启"
              v-if="item.state == false"
              class="btn btn-info"
              @click="updateState(item.id, true)"
            />
            <input
              type="button"
              v-if="item.state == true"
              value="禁用"
              @click="updateState(item.id, false)"
              class="btn btn-warning"
            />
            <input
              type="button"
              value="详情"
              @click="detail(item.id)"
              class="btn btn-success"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 分页 -->
    <div>
      <!-- 显示数据 -->
      <span>共{{ data.totalCount }}条</span>
      <span>每页{{ info.pageSize }}条</span>
      <span>当前{{ info.pageIndex }}/{{ data.totalPage }}</span>

      <!-- 改变页码  -->
      <input type="button" value="首页" @click="goPage(1)" /><!--pageIndex=1-->
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />
      <!--pageIndex= = pageIndex-1-->
      <!-- 循环总页数3 -->
      <input
        type="button"
        :value="item"
        v-for="item in data.totalPage"
        @click="goPage(item)"
      />
      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input type="button" value="跳转" @click="goPage(info.pageIndex)" />
      <!-- 改变页容量 -->
      <select v-model="info.pageSize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
  </div>

  <!-- <span v-for="item in 5">{{ item }}</span> -->
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

//向后端传递的参数(查询条件)
let info: any = reactive({
  pageIndex: 1, //页码
  pageSize: 2, //页容量
  shopName: '', //门店名称
  openTime1: '', //开业时间 开始时间
  openTime2: '', //开业时间 结束时间
});

//接受后端返回的数据
let data: any = reactive({
  list: [], //列表数据
  totalCount: 0, //总条数
  totalPage: 0, //总页数
});

let arr: any = ref([2, 3, 4, 5, 6]);

//控制一个复选框选中还是没选中
let checked = ref(false);

//控制多个复选框选中与没选中
let ids = ref([]);

//挂载阶段 相当于文档就绪函数
onMounted(() => {
  getShopList();
});

//详情   === 修改的第一步  就是返填
const detail = (id: any) => {
  router.push({
    path: 'shopDetail',
    query: {
      id: id,
    },
  });
};

//批量修改状态
const updatStateAll = (state: any) => {
  //1.友好提示（必选一项、请问要修改） 2.发送请求  3.刷新列表
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问您确定要修改状态吗');
  if (f) {
    axios({
      url: '/api/Shops/UpdateStateAllShopModel',
      method: 'put',
      params: {
        ids: ids.value.toString(),
        state: state,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('修改成功');
          checked.value = false;
          ids.value = [];
          getShopList();
        } else {
          alert('修改失败');
          checked.value = false;
          ids.value = [];
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//批量删除
const delAll = () => {
  //1.友好提示（必选一项、请问要删除） 2.发送请求  3.刷新列表
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问您确定要删除吗？');
  if (f) {
    axios({
      url: '/api/Shops/DelAllShopModel',
      method: 'put',
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          checked.value = false;
          getShopList();
        } else {
          alert('删除失败');
          checked.value = false;
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//选中一个  checked的值  true  false
const checkOne = () => {
  if (ids.value.length == data.list.length) {
    checked.value = true;
  } else {
    checked.value = false;
  }
};

//实现全选与选不选  改变 ids.value的值  ids=[]  ids=[5,6,3]
const checkAll = () => {
  console.log(checked.value);
  if (checked.value) {
    ids.value = data.list.map((item: any) => {
      return item.id;
    });
  } else {
    ids.value = [];
  }

  console.log(ids.value);
};

//单个修改状态
const updateState = (id: any, state: any) => {
  //1.提示要不要修改状态  2.发送网络请求  3.刷新列表
  let f = confirm('请问确定要修改状态吗？');
  if (f) {
    axios({
      url: '/api/Shops/UpdateShopState',
      method: 'put',
      params: {
        id: id,
        state: state,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('修改成功');
          getShopList();
        } else {
          alert('修改失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//删除
const del = (id: any) => {
  //1.友好提示
  let f = confirm('请问您确定要删除吗？');
  if (f) {
    //2.发送请求
    axios({
      url: '/api/Shops/DelShopItem',
      method: 'delete',
      params: {
        id: id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          //3.刷新列表
          getShopList();
        } else {
          alert('删除失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

const update = (id: any) => {
  //跳转并且传参
  router.push({
    path: '/shopUpdate',
    query: {
      id: id,
    },
  });
};

const show = () => {
  info.pageIndex = 1;
  getShopList();
};

//改变页码
const goPage = (num: any) => {
  console.log('num:', num);
  if (num < 1) {
    info.pageIndex = 1;
    return;
  }

  if (num > data.totalPage) {
    info.pageIndex = data.totalPage;
    return;
  }

  //改变页码的值
  info.pageIndex = num;
  getShopList();
};

//获取门店列表
const getShopList = () => {
  axios({
    url: '/api/Shops/GetShopList', //404
    method: 'get', //405
    params: info, //415
  })
    .then((res) => {
      console.log(res);
      //第一种
      // data.list = res.data.list;
      // data.totalCount = res.data.totalCount;
      // data.totalPage = res.data.totalPage;
      //第二种
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
span {
  margin: 0 5px;
}
</style>
